import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:squat_easy/generated/assets.dart';
import 'package:squat_easy/se_login/se_login_logic.dart';
import 'package:squat_easy/se_route.dart';
import 'package:squat_easy/se_standard/se_app_colors.dart';
import 'package:ylm_ui_kit/ylm_ui_kit.dart';

class SeLoginPage extends GetView<SeLoginLogic> {
  const SeLoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return BaseScaffold(
      scaffoldBackgroundColor: Colors.white,
      child: GetBuilder<SeLoginLogic>(
        init: SeLoginLogic(),
        builder: (logic) {
          return SizedBox(
            height: ScreenUtil().screenHeight,
            child: Stack(
              alignment: Alignment.topCenter,
              children: [
                _buildBg().positioned(left: 0, right: 0, top: 0, bottom: 0),
                _buildLoginContainer().center(),
                _buildPrivacy().positioned(bottom: 60.w),
              ],
            ),
          );
        },
      ),
    );
  }

  Widget _buildBg() {
    return const IconWidget.image(
      Assets.iconsLaunch,
      fit: BoxFit.fitWidth,
    );
  }

  Widget _buildLoginContainer() {
    return Container(
      width: 308.w,
      height: 273.w,
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage(Assets.pngLoginBg),
          fit: BoxFit.fill,
        ),
      ),
      padding: EdgeInsets.fromLTRB(22.w, 0, 22.w, 20.w),
      child: ClipRRect(
        child: Stack(
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                _buildTitle().paddingTop(30.w),
                _buildFastLogin().paddingTop(30.w),
                _buildAppleLogin().paddingTop(30.w),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPrivacy() {
    return SizedBox(
      width: 308.w,
      height: 68.w,
      child: Stack(
        children: [
          _buildPrivacyBg(),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              ButtonWidget.icon(
                (controller.agree ? Assets.svgRadioSelect : Assets.svgRadioNormal).toSvg(width: 16.w),
                padding: EdgeInsets.all(8.w),
                hasInkWell: false,
                onTap: () {
                  controller.agree = !controller.agree;
                  controller.update();
                },
              ).paddingBottom(15.w),
              Text.rich(
                TextSpan(
                  text: 'By using our App you agree with our ',
                  children: [
                    TextSpan(
                      text: 'Term of Use',
                      style: const TextStyle(color: Color(0xFF050A32)),
                      recognizer: TapGestureRecognizer()..onTap = SeRoute.openProtocolPage,
                    ),
                    const TextSpan(text: ' and '),
                    TextSpan(
                      text: 'Privacy Policy.',
                      style: const TextStyle(color: Color(0xFF050A32)),
                      recognizer: TapGestureRecognizer()..onTap = SeRoute.openPrivacyPage,
                    ),
                  ],
                ),
                style: const TextStyle(color: Colors.white, fontSize: 14, height: 1.5),
              ).expanded(),
            ],
          ).center(),
        ],
      ),
    );
  }

  Widget _buildPrivacyBg() => Container(
        width: 308.w,
        height: 68.w,
        child: Assets.svgLoginBottomBg.toSvg(width: 308.w, height: 68.w),
      );

  Widget _buildTitle() => const TextWidget.oneLine(text: 'SquatEasy', fontSize: 26);

  Widget _buildFastLogin() => ButtonWidget(
        gradient: SeAppColors.primaryGradient,
        width: 263.w,
        height: 54.w,
        borderRadius: 54.w,
        onTap: () => controller.fastLogin(),
        child: Stack(
          alignment: Alignment.centerLeft,
          children: [
            Assets.svgLoginFast.toSvg(width: 24.w).padding(left: 30.w, right: 38.w),
            const TextWidget.oneLine(text: 'Fast Login', fontSize: 16, color: Colors.black).center(),
          ],
        ),
      );

  Widget _buildAppleLogin() => ButtonWidget(
        width: 263.w,
        height: 54.w,
        backgroundColor: '#e6e6e6'.toColor,
        borderRadius: 54.w,
        onTap: controller.appleLogin,
        child: Stack(
          alignment: Alignment.centerLeft,
          children: [
            Assets.svgLoginApple.toSvg(width: 24.w).padding(left: 30.w, right: 38.w),
            const TextWidget.oneLine(text: 'Sign in with Apple', fontSize: 16, color: Colors.black).center(),
          ],
        ),
      );
}
